<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>msg:{{ msg}}</p>
        <p>str:{{ str}}</p>
    </div>
</body>
<script src="./vue.global.js"></script>
<script>

    // 一： vue2 中的问题
    // 1.全局定义的 (如： 指令， 组件，混入)  会在每一个vue 对象里起作用， 这样做会造成 全局的污染
    //      每一个对象有自己的子孙组件
    //      所以 不但每一个 vue 对象的子孙组件可以全局使用， 而且每个 vue对象都可以使用
    //      在 vue 类上全局定义 (如： 组件，指令，混入) ， 会在所有的vue对象里全局使用，也会污染别的 vue组件

    
    // 二： vue3 使用的app 的概念 ， 相当于 创键一个应用
    // 1.全局定义 的 (组件。指令，) ，只会在当前用用全局 (app 里的子孙组件的全局)





    // vue2 的全局定义： 在vue类上

    Vue.directive();
    Vue.component();

    let vm1 = new Vue();
    let vm2 = new Vue();


    // vue3 的全局定义： 在某个app (某个 vue的实例)上

    const {createApp} =Vue;

    let app1 = createApp({
        data(){
            return{
                msg:"hello",
                str:"hi",
            }
        },
    })
    app1.directive(); //在 app1 上全局定义的指令， 不会影响app2
    app1.component();// 组件
    app1.mount("#app")
</script>
</html>